.page-item1 {
  letter-spacing: 4px;

  h3 {
    font-size: 50px;
    line-height: 46px;
    color: #20222c;
    margin-top: 100px;
  }
}

.page-item2 {
  letter-spacing: 4px;
  background-image: url(./tixi-bg.png);

  h3 {
    font-size: 50px;
    line-height: 46px;
    color: #20222c;
    margin-top: 100px;
  }

  h5 {
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #20222c;
    line-height: 46px;
    margin-bottom: 35px;
  }

  .csta {
    min-height: 86.25px;
    height: 15vh;
    margin-top: 35px;
    margin-bottom: 35px;
  }

  .catepeople {
    position: relative;
    min-height: 258px;
    height: 65vh;
    background-image: url(./cate@2x.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    shape-outside: polygon(0 0, 0 0, 69% 0, 0 60%);
    float: right;
    width: 1200px;
  }

  .people {
    margin-top: -27%;
    animation-name: myfirst2;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-duration: 5s;
    transition-timing-function: linear;
    transition-property: all;
    transition-duration: 0.4s;
  }
}

.page-item3 {
  letter-spacing: 4px;

  h3 {
    font-size: 50px;
    line-height: 46px;
    color: #20222c;
    margin-top: 100px;
    font-weight: bold;
  }

  h5 {
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #20222c;
    line-height: 46px;
    margin-bottom: 35px;
  }

  .grid {
    display: grid;
    grid-template-columns: 0.6fr 1fr 1fr 0.6fr;
    background-color: #000;

    img {
      min-width: 100%;
      width: 100%;
      filter: alpha(opacity=60);
      opacity: 0.6;
      transition-duration: 1s;
      transition-property: all;
    }

    img:hover {
      filter: none;
      opacity: 1;
    }
  }
}

@keyframes myfirst2 {
  0% {
    margin-left: 10%;
  }

  25% {
    margin-left: 30%;
  }

  50% {
    margin-left: 50%;
  }

  75% {
    margin-left: 70%;
  }

  100% {
    margin-left: 90%;
  }
}